<!DOCTYPE html>
<html>
<head>
    <title>AI Chat</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
        }
        #chat-container {
            height: 400px;
            border: 1px solid #ccc;
            overflow-y: auto;
            padding: 10px;
            margin-bottom: 10px;
        }
        .message {
            margin-bottom: 10px;
            padding: 8px;
            border-radius: 5px;
        }
        .user-message {
            background-color: #e3f2fd;
            margin-left: 20%;
        }
        .ai-message {
            background-color: #f5f5f5;
            margin-right: 20%;
        }
        #input-container {
            display: flex;
            gap: 10px;
            flex-direction: column;
        }
        .input-row {
            display: flex;
            gap: 10px;
        }
        #message-input, #system-prompt-input {
            flex-grow: 1;
            padding: 8px;
        }
        button {
            padding: 8px 16px;
            background-color: #2196f3;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
        button:hover {
            background-color: #1976d2;
        }
    </style>
</head>
<body>
    <h1>AI Chat</h1>
    <div id="chat-container"></div>
    <div id="input-container">
        <div class="input-row">
            <input type="text" id="system-prompt-input" placeholder="System prompt (optional)">
        </div>
        <div class="input-row">
            <input type="text" id="message-input" placeholder="Type your message...">
            <button onclick="sendMessage()">Send</button>
        </div>
    </div>

    <script>
        function appendMessage(message, isUser) {
            const chatContainer = document.getElementById('chat-container');
            const messageDiv = document.createElement('div');
            messageDiv.className = `message ${isUser ? 'user-message' : 'ai-message'}`;
            messageDiv.textContent = message;
            chatContainer.appendChild(messageDiv);
            chatContainer.scrollTop = chatContainer.scrollHeight;
        }

        async function sendMessage() {
            const messageInput = document.getElementById('message-input');
            const systemPromptInput = document.getElementById('system-prompt-input');
            const message = messageInput.value.trim();
            const systemPrompt = systemPromptInput.value.trim();
            
            if (!message) return;

            appendMessage(message, true);
            messageInput.value = '';

            try {
                const response = await fetch('http://localhost:8077/api/chat', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify({
                        message: message,
                        systemPrompt: systemPrompt
                    })
                });

                if (!response.ok) {
                    throw new Error('Network response was not ok');
                }

                const data = await response.json();
                if (data.status === 'success') {
                    appendMessage(data.response, false);
                } else {
                    appendMessage('Error: ' + data.response, false);
                }
            } catch (error) {
                console.error('Error:', error);
                appendMessage('Sorry, there was an error processing your message.', false);
            }
        }

        // Allow sending message with Enter key
        document.getElementById('message-input').addEventListener('keypress', function(e) {
            if (e.key === 'Enter') {
                sendMessage();
            }
        });
    </script>
</body>
</html>
